<template>
  <div class="content-container">
    <!-- 搜索栏 -->
    <div ref="adminContentSearch" class="content-search-wrap">
      <el-form 
      	class="content-search"
      	inline
      	size="mini"
      >
        <el-form-item label="商品类型名称">
          <el-input v-model="query.name" placeholder="商品类型名称"></el-input>
        </el-form-item>

        <el-form-item>
    		<el-button size="mini" type="primary">搜索</el-button>
    		<el-button size="mini" type="danger">清空</el-button>
  		</el-form-item>
      </el-form>
    </div>
    <!-- 工具栏 -->
    <div ref="adminContentTools" class="content-tools-wrap hidden">
      	<div class="tools-left f-l">
      		
      		<el-button-group>
			       <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleAdd">新增</el-button>
			   </el-button-group>

      	</div>
      	<div class="tools-right f-r">
      		
			      <el-tooltip effect="dark" content="刷新" placement="top">
              <el-button size="mini" type="primary" icon="el-icon-refresh" circle @click="refresh"></el-button>
            </el-tooltip>
			
      	</div>
    </div>
    <!-- 内容栏--表格 -->
    <div class="content-table-wrap" v-loading="loading" loading-type="chrome-circle-turn">
    	<el-table
	        border
	        v-if="data"
	        size="mini"
	        :data="data"
	        height="500"
	        style="width: 100%"
      	>
    		<el-table-column
		      	type="selection"
		      	width="55">
		    </el-table-column>

    		<el-table-column
    			fixed
		      	type="index"
		      	:index="tableIndex">
		    </el-table-column>

    		<el-table-column
		      	fixed
		      	prop="name"
		      	label="名称"
		      	width="200">
		    </el-table-column>

		    <el-table-column
		      	prop="remark"
		      	label="备注"
		      	width="300">
		    </el-table-column>

		   
		    <el-table-column
		    	fixed="right"
		      	label="操作"
		    >

		      	<template slot-scope="scope">
		      		<el-button
			      		size="mini"
			      		type="primary"
			      		@click="handleEdit(scope.$index, scope.row)"
		      		>编辑</el-button>

			      	<el-button
			      		size="mini"
			      		type="primary"
			      		@click="handleDel(scope.$index, scope.row)"
			      	>删除</el-button>
		      	</template>

		    </el-table-column>

    	</el-table> 

      <!-- 分页 -->
      <div ref="adminContentPagination" class="content-pagination-wrap">
        <el-pagination
            background
            :current-page="page.currentPage"
            :page-sizes="pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
      </div> 
    </div>

	<!-- 添加dialog -->
    <add-dialog
    	:visible="addDialogVisible"
    	@cancel="editDialogCancel"
		:newData="newData"
		@loadData="loadData"
    ></add-dialog>

    <!-- 修改dialog -->
    <edit-dialog
    	:visible="editDialogVisible"
    	:editForm.sync='editForm'
      	:type="editType"
    	@cancel="editDialogCancel"
      @confirm="editDialogConfirm"
    ></edit-dialog>

    <!-- 分配权限 -->
    <auth-assign
      :visible="authVisible"
      :menuIds="menuIds"
      :form.sync="authForm"
      @close="authDialogClose"
      @confirm="handleSetRoles"
    ></auth-assign>

  </div>

</template>

<script>
import { mapGetters } from 'vuex'

import {
  getList,
  getRole,
  remove,
  update,
  add,
  setMenu,
} from "@/api/admin/roles";

import {
	list,
	editProType,
	delType
} from "@/api/agri-product/goodsType"


import RoleEditDialog from '@/components/Dialog/roleEditDialog'
import AuthAssign from '@/components/Dialog/authAssign'
import EditDialog from '@/components/Dialog/productType/edit/editDialog'
import AddDialog from '@/components/Dialog/productType/add/addDialog'

import adminMixins from "@/mixins/admin"
export default {
  name: 'role',
  mixins:[adminMixins],
  components:{
  	RoleEditDialog,
	AuthAssign,
	EditDialog,
	AddDialog
  },
  computed: {
    ...mapGetters([
      'name',
      'permission',
      'userInfo'
    ])
  },
  	data(){
	  	return{
	      	//1新增，2修改
	      	editType:1,
	      	loading:true,
			  authForm:{},
			  newData: {},
	  		//修改模态框的显示隐藏
			editDialogVisible:false,
			addDialogVisible:false,
	      	authVisible:false,
	      	menuIds: [],
	  		query:{
	  			name:''
	  		},
	  		data:null,
	  		page: {
	    	  pageSize: 10,
	    	  currentPage: 1,
	    	  total: 0
	  	  },
	  	  pageSizes:[10,20,30,40,50,100],
	  	  editForm:{}
	  	}
  	},
  	mounted(){
    	//设置dom尺寸
    	this.setSize();
  		this.loadData(this.page)
  	},
  	methods:{
  		//请求table数据
  		loadData(page, params = {}, status){
  		  	this.loading = true;
      		list(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {

      			console.log("---商品类型----------")
      			console.log(res)
        		this.loading = false;
        		this.page.total = res.data.data.total;
        		this.page.currentPage = res.data.data.current;
				this.data = this.reviseData(res.data.data.records);
				if (status) this.newData = this.data[this.data.length-1];
		  });	
  		},
		reviseData(data){
			return data
		},

		//转换账号状态
		convertStatus(status){
			if(status == 'ENABLE'){
				return true
			}else if(status == 'UNENABLE'){
				return false
			}else{
				return false
			}
		},
		//表格序号
		tableIndex(index){
			return index+1
		},
		//新增用户
		handleAdd(){
			// this.editForm = {};
			// this.editType = 1;
			//模态框显示
			this.addDialogVisible = true;
		},
		//刷新当前页
		refresh(){
		this.loadData(this.page)
		},
		//点击操作的编辑
		handleEdit(index,row){
			this.editType = 2;
			this.editForm = row;
			//模态框显示
			this.editDialogVisible = true;
		},
		//点击操作的删除
		handleDel(index,row){
			console.log(row)

			this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(()=>{
				return delType(row.id);
			}).then((res) => {

				this.loadData(this.page)
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
		},
		//分配权限
		handleRoles(index,row){
			this.authForm = row;
		getRole(this.authForm.roleId).then(res => {
			console.log("------获取角色权限---------")
			this.authForm = res.data.data;
			this.authForm.menuId = this.authForm.menuIds || '';
			this.menuIds = this.authForm.menuIds;
			this.authVisible = true;
		});
		},
		handleSetRoles (data) {
		setMenu(data.roleId,data.menuId).then(() => {
			this.$message.success('设置成功');
			this.menuIds = [];
			this.authVisible = false;
			this.loadData(this.page);
			this.authForm = {};
		})
		},
		editDialogCancel(){
			console.log('关闭啦')
			this.editDialogVisible = false;
			this.addDialogVisible = false;
			this.editForm = {};
			this.newData = {}
		},
		editDialogConfirm(form){
			this.editDialogVisible = false;

			if(form.type == 1){

				add(form.data).then((res)=>{

				//this.editDialogVisible = false;
				this.loadData(this.page)
					this.$message({
						type: 'success',
						message: '添加成功!'
					});
				})

			}else if(form.type == 2){

				update(form.data).then((res)=>{

				
					this.loadData(this.page)
					this.$message({
						type: 'success',
						message: '修改成功!'
					});
				})
			}
		},
		//权限模态框关闭
		authDialogClose(){
		this.menuIds = [];
		this.authVisible = false;
		}
	}
	}
</script>

<style lang="scss" scoped>
.content {
  &-container {

  }
  /***搜索栏***/
  &-search-wrap{
    padding: 15px;
    border-bottom: 1px solid #E8EBEE;
  }
  /***工具栏***/
  &-tools-wrap{
    padding: 15px;
  }
  /***内容栏***/
  &-table-wrap{
    position: relative;
    padding: 15px;
  }
  /***分页***/
  &-pagination-wrap{
    text-align: right;
  	padding-top: 15px;
  }
}
</style>
